<template>
  <div id="app">
    <!-- 头部 -->
    <div class="help">
      <div class="header">
        <span class="goback" v-if="$route.path !== '/home'" @click="goBack()">
          <i class="van-icon van-icon-arrow-left"></i>返回
        </span>
        黑马商城
      </div>
    </div>

    <!-- 中间的内容区域 -->
    <!-- 在中间的内容区域里面添加一个路由占位符 -->
    <router-view style="margin-bottom: 50px"></router-view>

    <!-- 底部tab栏 -->
    <van-tabbar v-model="active" route v-if="$route.path !== '/shopcar'">
      <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/member" icon="user-o">会员</van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="cart-o" :badge="shopCarCount">购物车</van-tabbar-item>
      <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      active: 0
    }
  },
  mounted() {
    window.addEventListener('unload', this.saveState)
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    saveState() {
      sessionStorage.setItem('state', JSON.stringify(this.$store.state))
    }
  },
  computed: {
    ...mapState(['shopCarCount'])
  }
}
</script>

<style lang="less">
.help {
  width: 100%;
  height: 40px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #1989fa;
  color: #fff;
  span {
    align-content: center;
  }
}
.goback {
  position: fixed;
  display: flex;
  margin-left: 13px;
  font-size: 14px;
  i {
    display: inline-block;
    margin-top: 13px;
  }
}
</style>
